import React, { useEffect, useState } from 'react';
import { useAiCorrectorStore } from '@/stores/useAiCorrectorStore';
import { CorrectionStatus } from '@/types/aiCorrector';

const CorrectionProgress: React.FC = () => {
  const { state, startCorrection, resetCorrection } = useAiCorrectorStore();
  // 添加脉动效果状态
  const [isPulsing, setIsPulsing] = useState(false);
  
  const handleStartCorrection = () => {
    startCorrection();
  };
  
  const handleResetCorrection = () => {
    resetCorrection();
  };
  
  // 当状态为处理中时，添加脉动效果
  useEffect(() => {
    let pulseTimer: number | null = null;
    
    if (state.status === CorrectionStatus.PROCESSING) {
      // 设置脉动效果的定时器，每1.5秒切换一次状态
      pulseTimer = window.setInterval(() => {
        setIsPulsing(prev => !prev);
      }, 1500);
    } else {
      setIsPulsing(false);
    }
    
    return () => {
      if (pulseTimer !== null) {
        window.clearInterval(pulseTimer);
      }
    };
  }, [state.status]);
  
  // 检测是否可以开始检测
  const canStartCorrection = state.selectedItems.length > 0 && 
    (state.status === CorrectionStatus.IDLE || state.status === CorrectionStatus.SELECTING);
  
  // 检测是否已完成
  const isCompleted = state.status === CorrectionStatus.COMPLETED;
  
  return (
    <div className="bg-card rounded-lg shadow-sm p-6 mb-6">
      <h2 className="text-xl font-semibold text-foreground mb-4">AI智能检测</h2>
      
      {/* 进度条 */}
      <div className="mb-4">
        <div className="flex justify-between items-center mb-2">
          <span className="text-sm font-medium text-foreground">检测进度</span>
          <span className="text-sm text-muted-foreground">{state.progress}%</span>
        </div>
        <div className="w-full bg-muted rounded-full h-2.5 overflow-hidden">
          <div 
            className={`h-2.5 rounded-full transition-all duration-300 bg-primary ${state.status === CorrectionStatus.PROCESSING ? 'relative' : ''}`}
            style={{ 
              width: `${state.progress}%`
            }}
          >
            {/* 处理中状态下的动态效果 */}
            {state.status === CorrectionStatus.PROCESSING && (
              <div 
                className={`absolute top-0 left-0 right-0 bottom-0 transition-opacity duration-1000 progress-shimmer ${isPulsing ? 'opacity-70' : 'opacity-100'}`}
              />
            )}
          </div>
        </div>
        
        {/* CSS动画已移动到外部样式文件 */}
      </div>
      
      {/* 状态信息 */}
      <div className="mb-6">
        {state.status === CorrectionStatus.IDLE && (
          <p className="text-sm text-muted-foreground">请选择要检测的检查项，然后点击“开始检测”按钮。</p>
        )}
        
        {state.status === CorrectionStatus.SELECTING && (
          <p className="text-sm text-muted-foreground">已选择 {state.selectedItems.length} 个检查项，准备开始检测。</p>
        )}
        
        {state.status === CorrectionStatus.PROCESSING && (
          <div className="flex items-center text-sm text-muted-foreground">
            <div className="mr-2 flex items-center">
              {/* 添加旋转加载图标 */}
              <svg 
                className="animate-spin h-4 w-4 text-primary mr-2" 
                xmlns="http://www.w3.org/2000/svg" 
                fill="none" 
                viewBox="0 0 24 24"
              >
                <circle 
                  className="opacity-25" 
                  cx="12" 
                  cy="12" 
                  r="10" 
                  stroke="currentColor" 
                  strokeWidth="4"
                ></circle>
                <path 
                  className="opacity-75" 
                  fill="currentColor" 
                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                ></path>
              </svg>
              正在检测中，已完成 {Math.round(state.progress)}%...
            </div>
            {state.progress > 0 && state.progress < 100 && (
              <span>正在检测第 {Math.ceil((state.selectedItems.length * state.progress) / 100)} 个检查项</span>
            )}
          </div>
        )}
        
        {state.status === CorrectionStatus.COMPLETED && (
          <p className="text-sm text-muted-foreground">
            检测完成！共检测 {state.selectedItems.length} 个检查项，
            发现 {state.stats.totalIssues} 个问题。
          </p>
        )}
      </div>
      
      {/* 操作按钮 */}
      <div className="flex gap-3">
        {canStartCorrection && (
          <button
            onClick={handleStartCorrection}
            disabled={state.selectedItems.length === 0}
            className={`px-6 py-3 rounded-lg font-medium transition-colors ${
              state.selectedItems.length === 0
                ? 'bg-muted text-muted-foreground cursor-not-allowed'
                : 'bg-primary text-primary-foreground hover:bg-primary-hover'
            }`}
          >
            开始检测
          </button>
        )}
        
        {isCompleted && (
          <button
            onClick={handleResetCorrection}
            className="px-6 py-3 rounded-lg bg-secondary hover:bg-secondary/80 text-secondary-foreground font-medium transition-colors"
          >
            重新选择
          </button>
        )}
      </div>
    </div>
  );
};

export default CorrectionProgress;
